<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表情编辑工具</title>
<script type="text/javascript" src="../js/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/tools/face/FaceUtil.js"></script>
<style>
.faces_list{margin-left:15px; display:none;}
.faces_list li{width:26px; height:22px; border:1px solid #e8e8e8; padding:4px 2px; text-align:center; overflow:hidden; float:left; margin-top:-1px; margin-left:-1px; cursor:pointer;}
</style>
<script>

//添加表情到容器
$(document).ready( function () {
	faceUtil.init({showContent : "faceContent", initContent : "emotions", isHideInit : true, maxNumInput : 5, maxNumInputId : "inputNum", maxNumInputMsg : "还可以输入{num}字!", maxNumInputFn : "unDisabledBtn()", maxNumInputOutstripMsg : "已超过<font color='red'>{num}</font>字!", maxNumInputOutstripFn : "disabledBtn()", isDefaultEvent : true});
	//faceUtil.init({showContent : "faceContent", initContent : "emotions"});
});

function inputNum() {
	var obj = $("#faceContent");
	$('#inputNum').html(500 - obj.val().length);
	faceUtil.getInput();
}

//处理单个表情
function getFaceImg() {
	var faceImg = $("#faceImg");
	var _val = $("#inputChinese").val();
	var _url = faceUtil.getFaceImgPath(_val);
	faceImg.attr("src", _url);
}

//处理字符串标签
function getFaceAll() {
	var inputChineseString = $("#inputChineseString");
	var _val = faceUtil.getFaceReplaceAll(inputChineseString.html());
	inputChineseString.html(_val);
}

function disabledBtn() {
	$('#submitBtn').attr("disabled", "disabled");
}
function unDisabledBtn() {
	$('#submitBtn').attr("disabled", false);
}
</script>
</head>
<body>
	<div>
		<div><textarea id="faceContent" name="faceContent" cols="50" rows="8" onclick="inputNum();"></textarea></div>
		<div>
			<a href="javascript:faceUtil.showFace();">表情</a>
			<em id="inputNum">0</em>
		</div>
		<input type="button" id="submitBtn" value="提交"/>
	</div>

	<ul class="faces_list" id="emotions">
	</ul>

	<h3>根据汉字获取图片</h3>
	单个表情汉字:
	<input type="text" id="inputChinese" value="[织]" />
	<input type="button" value="查看表情" onclick="getFaceImg()" />
	<br/>
	<img src="#" id="faceImg"/>
	<br/>
	字符串表情处理
	<span id="inputChineseString">测试[织][织]和[神马]的表情!</span>
	<input type="button" value="处理字符串" onclick="getFaceAll()" />
</body>
</html>